<template>
  <div>
    <h1>图表组件--环形图--丝路热点：数据分布</h1>
    <v-chart theme="technology" :options="options" :auto-resize="true"/>
  </div>
</template>

<script>
import img from "@/assets/logo.png"
console.log(img)
export default {
  name: "ChartPie",
  data() {
    return {
      options: {}
    };
  },
  mounted() {
    this.options = {
      color: ["#00ff00", "#ffffff", "#ff0000", "#00ffff", "#0000ff"],
      //   tooltip: {
      //     trigger: "item",
      //     formatter: "{a} <br/>{b}: {c} ({d}%)"
      //   },
      legend: {
        orient: "vertical",
        x: "left",
        data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
      },
      series: [
        {
          name: "访问来源",
          type: "pie",
          radius: ["50%", "70%"],
          avoidLabelOverlap: true,
          label: {
            normal: {
              show: true,
              formatter: "{text|{d}%}\n{b}",
              rich: {
                tit: {
                  color: "red",
                  lineHeight: 10
                },
                text: {
                  backgroundColor: {
                    image: img
                  },
                  height: 40
                }
              }
              //   position: "center"
            }
            // emphasis: {
            //   show: true,
            //   textStyle: {
            //     fontSize: "30",
            //     fontWeight: "bold"
            //   }
            // }
          },
          labelLine: {
            normal: {
              show: true
            }
          },
          data: [
            { value: 335, name: "直接访问" },
            { value: 310, name: "邮件营销" },
            { value: 234, name: "联盟广告" },
            { value: 135, name: "视频广告" },
            { value: 1548, name: "搜索引擎" }
          ]
        }
      ]
    };
  }
};
</script>